<ion-header>
  <ion-toolbar>
    <ion-title mode="ios">通讯录</ion-title>
    <app-head-toolbar return-url="/tabs/address-book" slot="end"></app-head-toolbar>
  </ion-toolbar>
</ion-header>

<ion-content class="content">
  <div class="sidebar">
    <div (click)="scollTo('top')">↑</div>
    <div *ngFor="let friend of friends; let i = index" (click)="scollTo(i)">{{friend.letter}}</div>
  </div>

  <div #top>
    <ion-list class="address-list">
      <ion-item>
        <ion-avatar slot="start" class="common-icon new-person">
          <ion-icon name="person-add"></ion-icon>
        </ion-avatar>
        <ion-label>
          <h2>新的朋友</h2>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start" class="common-icon multi-chats">
          <ion-icon name="people"></ion-icon>
        </ion-avatar>
        <ion-label>
          <h2>群聊</h2>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start" class="common-icon tag">
          <ion-icon name="pricetag"></ion-icon>
        </ion-avatar>
        <ion-label>
          <h2>标签</h2>
        </ion-label>
      </ion-item>
      <ion-item lines="none">
        <ion-avatar slot="start" class="common-icon official-account">
          <ion-icon name="person"></ion-icon>
        </ion-avatar>
        <ion-label>
          <h2>公众号</h2>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>

  <div #contacts *ngFor="let friend of friends">
    <ion-list class="address-list" *ngIf="friend.data.length!=0">
      <ion-list-header>
        {{friend.letter}}
      </ion-list-header>
      <ion-item *ngFor="let item of friend.data; last as l" [lines]="l ? 'none': 'inset'" (click)="showFriendDetail(item)">
        <ion-avatar slot="start">
          <img [src]="item.photoUrl ? item.photoUrl : './assets/images/user.default.jpeg'">
        </ion-avatar>
        <ion-label>
          <h2>{{item.remarkName}}</h2>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
</ion-content>